// 小箭头动画
@keyframes myfirst {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20%);
  }
  100% {
    transform: translateY(0);
  }
}
.body {
  position: relative;
}
// 背景
.bg-ellipse-full-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5000px;
  overflow: hidden;
  z-index: -1;
  background: linear-gradient(
    98.63deg,
    rgba(248, 249, 251, 0.546) 20.59%,
    rgba(120, 230, 220, 0) 89.33%
  );
}

.bg-ellipse-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: -1;
}

.bg-ellipse {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 51%;
  z-index: -1;
  -webkit-transition: -webkit-transform 0.3s linear;
  -webkit-transition: transform 0.3s linear;
  transition: transform 0.3s linear;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}

.bg-ellipse-wrapper .bg-ellipse-1 {
  right: -200px;
  top: 230px;
  background: linear-gradient(
    44.11deg,
    rgba(139, 233, 223, 0.75) 8.94%,
    rgba(255, 255, 255, 0) 86.73%
  );
  -webkit-transform: rotate(-85.35deg);
  -ms-transform: rotate(-85.35deg);
  transform: rotate(-85.35deg);
}

.bg-ellipse-wrapper .bg-ellipse-2 {
  left: -200px;
  top: 420px;
  background: linear-gradient(
    44.11deg,
    rgba(124, 177, 235, 0.6) 8.94%,
    rgba(255, 255, 255, 0) 86.73%
  );
  -webkit-transform: rotate(-21.57deg);
  -ms-transform: rotate(-21.57deg);
  transform: rotate(-21.57deg);
}

.bg-ellipse-wrapper .bg-ellipse-3 {
  right: -200px;
  top: 1000px;
  background: linear-gradient(
    44.11deg,
    rgba(245, 198, 39, 0.6) 8.94%,
    rgba(255, 255, 255, 0) 86.73%
  );
  -webkit-transform: scale(0.85) rotate(-63.95deg);
  -ms-transform: scale(0.85) rotate(-63.95deg);
  transform: scale(0.85) rotate(-63.95deg);
}

.bg-ellipse-wrapper .bg-ellipse-4 {
  left: -200px;
  top: 1500px;
  background: linear-gradient(
    44.11deg,
    rgba(139, 233, 223, 0.75) 8.94%,
    rgba(255, 255, 255, 0) 86.73%
  );
  -webkit-transform: rotate(-29.1deg);
  -ms-transform: rotate(-29.1deg);
  transform: rotate(-29.1deg);
}

.bg-ellipse-wrapper .bg-ellipse-5 {
  right: -200px;
  top: 2300px;
  background: linear-gradient(
    44.11deg,
    rgba(124, 177, 235, 0.6) 8.94%,
    rgba(255, 255, 255, 0) 86.73%
  );
  -webkit-transform: rotate(-70.95deg);
  -ms-transform: rotate(-70.95deg);
  transform: rotate(-70.95deg);
}

.bg-ellipse-wrapper .bg-ellipse-6 {
  left: -200px;
  top: 2850px;
  background: linear-gradient(
    44.11deg,
    rgba(245, 198, 39, 0.6) 8.94%,
    rgba(255, 255, 255, 0) 86.73%
  );
  -webkit-transform: scale(0.95) rotate(-21.57deg);
  -ms-transform: scale(0.95) rotate(-21.57deg);
  transform: scale(0.95) rotate(-21.57deg);
}

.bg-ellipse-wrapper .bg-ellipse-7 {
  right: -200px;
  top: 2200px;
  background: linear-gradient(
    44.11deg,
    rgba(139, 233, 223, 0.75) 8.94%,
    rgba(255, 255, 255, 0) 86.73%
  );
  -webkit-transform: scale(0.85) rotate(-93.95deg);
  -ms-transform: scale(0.85) rotate(-93.95deg);
  transform: scale(0.85) rotate(-93.95deg);
}

.bg-ellipse-wrapper .bg-ellipse-8 {
  left: -200px;
  top: 2500px;
  background: linear-gradient(
    44.11deg,
    rgba(124, 177, 235, 0.6) 8.94%,
    rgba(255, 255, 255, 0) 86.73%
  );
  -webkit-transform: rotate(-21.95deg);
  -ms-transform: rotate(-21.95deg);
  transform: rotate(-21.95deg);
}
// 总体
.wrap {
  position: relative;
  // 顶部导航栏
  .head-con {
    height: 60px;
    margin: 0 auto;
    font-weight: 200;
    font-size: 14px;
    color: #ffffff;
    z-index: 8;
    // 左边logo部分
    .logo {
      width: 130px;
      height: 70px;
      line-height: 70px;
      float: left;
      a {
        color: #ffffff;
        float: left;
        font-family: Gilroy Semi Bold, -apple-system, BlinkMacSystemFont,
          Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
          Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji,
          Segoe UI Emoji, Segoe UI Symbol;
      }
    }
    img {
      width: 50px;
      height: 50px;
      margin-top: 10px;
      margin-right: 8px;
      float: left;
      vertical-align: middle;
    }
  }
  // 顶部导航栏
  .head-nav {
    width: 560px;
    height: 70px;
    line-height: 70px;
    float: right;
    ul {
      height: 70px;
      width: 100%;
      li {
        float: left;
        margin-right: 42px;
        height: 100%;
        line-height: 50px;
        a {
          font-weight: 200;
          color: #ffffff;
          padding-bottom: 10px;
          box-sizing: border-box;
          line-height: 65px;
          font-family: Gilroy Semi Bold, -apple-system, BlinkMacSystemFont,
            Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
            Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji,
            Segoe UI Emoji, Segoe UI Symbol;
        }
        a:hover {
          opacity: 0.5;
          border-bottom: 2px solid #ffffff;
        }
      }
    }
  }
  // 视频
  .main-video {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 940px;
    overflow: hidden;
    video {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
    .main-txt {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 12;
      font-family: Gilroy Semi Bold, -apple-system, BlinkMacSystemFont, Segoe UI,
        PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue,
        Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
        Segoe UI Symbol;
      font-size: 54px;
      line-height: 61px;
      color: #fff;
      h3 {
        width: 100%;
        height: 81px;
        font-size: 54px;
        color: #ffffff;
      }
      p {
        position: relative;
        margin-left: 67px;
        width: 92%;
        height: 17px;
        color: #ffffff;
        letter-spacing: 25px;
        text-indent: 23px;
        font-size: 14px;
        line-height: 17px;
        opacity: 0.8;
        margin-top: 14px;
      }
      p::before {
        content: "";
        display: block;
        width: 74px;
        height: 2px;
        position: absolute;
        top: calc(50% - 0px);
        left: -81px;
        background-image: linear-gradient(
          270deg,
          rgba(255, 255, 255, 0),
          #fff 47%,
          rgba(255, 255, 255, 0)
        );
      }
      p::after {
        content: "";
        display: block;
        width: 74px;
        height: 2px;
        position: absolute;
        top: calc(50% - 1px);
        right: 0px;
        background-image: linear-gradient(
          270deg,
          rgba(255, 255, 255, 0),
          #fff 47%,
          rgba(255, 255, 255, 0)
        );
      }
    }
    //小箭头
    .arrows {
      position: absolute;
      top: 90%;
      left: 50%;
      width: 50px;
      height: 50px;

      a {
        position: relative;
        display: inline-block;
        width: 32px;
        height: 32px;
        border: 1px solid #ffff;
        border-radius: 50%;
        position: absolute;
        left: 50%;

        top: 50%;
        margin-top: -16px;
        margin-left: 16px;

        img {
          position: absolute;
          top: 4px;
          left: 6px;
          width: 20px;
          height: 20px;
          // padding: 6px;
          // padding-left: 5px;
          // padding-top: 4px;
          animation: myfirst 1.1s linear infinite;
        }
      }
      a::after {
        content: "";
        display: block;
        position: relative;
        height: 28px;
        border-left: 1px dashed #fff;
        left: 17px;
        top: 45px;
      }
    }
  }
  .main-top {
    width: 100%;
    height: 816px;
    margin-top: 1000px;
    background-color: #ccc;
    .maintop-left {
      width: 445px;
      height: 642px;
      float: left;
      h3 {
        width: 192px;
        height: 56px;
        color: #333333;
        font-size: 48px;
        font-weight: 800;
        margin-bottom: 68px;
      }
      p {
        font-size: 22px;
        color: #333333;
        line-height: 1.5;
      }
    }
    .maintop-right{
      float: right;
    width: 912px;
    height: 815px;
    background-color: blanchedalmond;
    }
  }
}
